<template>
  <div class="chuantu" style="position: relative;">

    <el-upload class="avatar-uploader " :style="tubiaocss" action="#" :on-change="uploadok" :auto-upload="false" :show-file-list="false">
      <img v-if="img" :src="img" class="avatar chuantu" >
      <div style="position: absolute; left:1px;bottom:0;line-height: 35px; background:rgba(0,0,0,0.5); color:#fff;  width:100%; border-radius:3px; text-align:center;" class="genghuan">点击图片更换</div>
      <i v-if="!img" v-else class="el-icon-plus avatar-uploader-icon" :style="tubiaocss"></i>
    </el-upload>
    <el-button v-if="img" size="medium" style="height: 40px; margin-left: 20px;"  @click="shanchu" type="text">删除</el-button>
  </div>
</template>

<script>
  import * as qiniu from 'qiniu-js'
  import axios from "axios";
  export default {
    name: 'chuantu',
    props:['imgs','widths','heights','shows'],
    data() {
      return {
        img: "",
        show:false,
      }
    },
    created() {

      if(this.imgs){
        this.img = this.imgs
      }

      if(!this.widths){
        this.widths = '200px'
      }
      if(!this.heights){
        this.heights = '200px'
      }
      this.tubiaocss = {
        width:this.widths,
        maxHeight:this.heights,
        lineHeight:this.heights
      }
    },
    methods: {
      shanchu:function(){
        this.img = ''
        this.$emit('getimg', '')
      },

      dataURLtoFile(dataurl, filename) {
        let arr = dataurl.split(","),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),
          n = bstr.length,
          u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, {
          type: mime
        });
      },
      //单个图片上传
      uploadok: function(file) {
        console.log(file)
        axios.post(`${this.apis}/api/qiniu/token`,{bucket:'test91'})
          .then(response => {
            if(response.data.msg.code == 0){

              const observer = {
                next(res){
                  console.log(res)
                  // ...
                },
                error(err){
                  console.log(err)
                  // ...
                },
                complete(res){
                  console.log(res.key)
                  // https://test91.91haoka.cn/500px1051021934.jpg
                  // ...
                }
              }

              const observable = qiniu.upload(file.raw, file.raw.name, response.data.data, {}, {})
              console.log(file.raw, file.raw.name, response.data.data, {}, {})
              const subscription = observable.subscribe(observer) // 上传开始

            }else{
              this.$message.error(response.data.msg.info);
            }
          });


      }

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

    .avatar-uploader{
    	border: 1px dashed #d9d9d9;
    	border-radius: 6px;
    	cursor: pointer;
    	position: relative;
    	overflow: hidden;
      /deep/ .el-upload{ display: block;}
    }

    .avatar-uploader .el-upload:hover {
    	border-color: #409EFF;
    }

    .avatar-uploader-icon {
    	font-size: 28px;
    	color: #8c939d;

    	text-align: center;
    }

    .avatar {
    	// max-width: 194px;
    	// max-height: 194px;
    	display: block;
      img{width: 100%; display: block;}
    }
    .genghuan{ display: none;}
    .chuantu:hover{
      .genghuan{ display: block;}
    }
</style>
